import React, { useEffect, useState } from 'react'
import {
  Checkbox,
  Popover,
  InputNumber,
  Button,
  Space
} from 'antd';

import styles from '../index.module.less'

function CheckboxItem({
  medicineId,
  label,
  quantity = 10,
  onChange,
  checkedList
}) {
  const [open, setOpen] = useState(false);

  const [checked, setChecked] = useState(false);

  const [numberValue, setNumber] = useState(quantity);

  function onCheckbox() {
    // if (checked) {
    //   setChecked(false)
    // } else {
    //   // setOpen(true)
    //   setChecked(true)
    // }
    onChange && onChange({
      medicineId,
      label,
      quantity
    })
  }

  useEffect(() => {
    if (Array.isArray(checkedList) && checkedList?.length > 0) {
      const isChecked = checkedList.some(item => item?.medicineId == medicineId)
      setChecked(isChecked)
    }
  }, [checkedList])


  function handleOpenChange(value) {
    // console.log('handleOpenChange :>> ', value);
  }

  function onOk() {
    setOpen(false)
    setChecked(true)
    onChange && onChange({
      medicineId,
      label,
      quantity: numberValue
    })
  }

  function onChangeNumber(value) {
    // console.log('onChangeNumber :>> ', value);
    setNumber(value)
  }

  return (
    // <Popover
    //   content={
    //     <div>
    //       <InputNumber
    //         // step="0.1"
    //         addonBefore={label}
    //         addonAfter="g"
    //         value={numberValue}
    //         onChange={onChangeNumber}
    //       />
    //       <div style={{ marginTop: 10 }}>
    //         <Space>
    //           <Button onClick={() => setOpen(false)}>取消</Button>
    //           <Button onClick={onOk} type='primary'>确定</Button>
    //         </Space>
    //       </div>
    //     </div>
    //   }
    //   title="请输入药量"
    //   trigger="click"
    //   open={open}
    //   onOpenChange={handleOpenChange}
    // >
    <Checkbox
      checked={checked}
      value={medicineId}
      onClick={onCheckbox}
      className={styles.checkbox}
    >
      {label}
    </Checkbox>
    // </Popover>
  )
}

export default CheckboxItem;